<template>
  <div>
    <div class="h60">
      <span class="exnum">{{ Num }}.{{ item.title }}</span>
      <span class="labels">
        <span v-if="item.isJt == '1'">机经</span>
        <span v-if="item.isJt !== '1'" style="background: #7cc3d6">练习题</span>
        <span
          style="background: #ff5e4e"
          v-if="item.labelStyle == 'wrong-color'"
          >错题</span
        >
        <span style="background: #13bfbf" v-if="subject.isYc == '1'"
          >本周预测</span
        >
        <span style="background: #94d0f7">{{ item.titleNumber }}</span>
      </span>
    </div>
    <div class="h480">
      <div
        class="test_wrapper"
        v-if="dataList.length > 0"
        @dragover="dragover($event)"
      >
        <transition-group class="transition-wrapper" name="sort">
          <div
            v-for="item in dataList"
            :key="item.id"
            class="sort-item"
            :draggable="true"
            @dragstart="dragstart(item)"
            @dragenter="dragenter(item, $event)"
            @dragend="dragend(item, $event)"
            @dragover="dragover($event)"
          >
            <span>{{ item.id }}</span> {{ item.label }}
          </div>
        </transition-group>
      </div>
    </div>
    <div class="time">
      <span>答题时间：{{ s_to_hs(answerTime) }}</span>
    </div>
  </div>
</template>

<script>
import readingUtil from "@/utils/readingUtil";
import { sendPost } from "@/utils/http";
import api from "@/config/api";
export default {
  mixins: [readingUtil],
  props: ['item', 'Num'],
  components: {
  },
  data () {
    return {
      answerTime: 0,
      imgUrl: '',
      oldData: null, // 开始排序时按住的旧数据
      newData: null, // 拖拽过程的数据
      dataList: [],
      isAnswerShow: false,
      iNum: '', // 题目索引号
      answer: ''
    }
  },
  created () {
    setInterval(this.countUpTime, 1000)
    this.getData();

  },
  methods: {

    getData () {
      var that = this
      sendPost(api.getSubjectDetails, {
        id: that.item.subjectId,
      }).then((res) => {
        console.log(res)
        var op = res.data.option.split('&@#');
        for (var i = 0; i < op.length; i++) {
          var o = new Object();
          o.id = i + 1
          o.label = op[i];
          that.dataList.push(o)
        }


      })
    },
    //提交作业
    addPractice () {

      if (this.flag) {
        this.$msg.error("你已经作答，无需重复操作！")
        return
      }
      var that = this;
      var a = '';

      for (var i = 0; i < that.dataList.length; i++) {
        if (a == '') {
          a = that.dataList[i].id
        } else {
          a += "," + that.dataList[i].id
        }
      }
      that.flag = true
      sendPost(api.submitAnswer, {
        id: that.$route.query.id,
        answer: a,
        times: that.answerTime
      }).then((r) => {
        that.$msg({
          message: '答案提交成功',
          type: 'success'
        });

        this.refresh(that.$route.query.id);
      })
    },

    dragstart (value) {
      this.oldData = value
    },
    // 记录移动过程中信息
    dragenter (value, e) {
      this.newData = value
      e.preventDefault()
    },
    // 拖拽最终操作
    dragend (value, e) {
      if (this.oldData !== this.newData) {
        const oldIndex = this.dataList.indexOf(this.oldData)
        const newIndex = this.dataList.indexOf(this.newData)
        const newItems = [...this.dataList]
        // 删除老的节点
        newItems.splice(oldIndex, 1)
        // 在列表中目标位置增加新的节点
        newItems.splice(newIndex, 0, this.oldData)
        this.dataList = [...newItems]
        // console.log(this.dataList);
        let answer = ''
        for (var i = 0; i < this.dataList.length; i++) {
          answer += this.dataList[i].id
        }
        console.log(answer);
        this.answer = answer
        this.$emit('sendAnswer', this.answer)
      }
    },
    // 拖动事件（主要是为了拖动时鼠标光标不变为禁止）
    dragover (e) {
      e.preventDefault()
    },

    // 排序处理
    // 重做:把数据重新排序
    sortData () {
      this.sortByKey(this.dataList, 'id')
    },

    sortByKey (array, key) {
      return array.sort(function (a, b) {
        var x = a[key];
        var y = b[key];

        return ((x < y) ? -1 : (x > y) ? 1 : 0)
      })
      this.flag = false

    }
  },
}
</script>

<style lang="less" scoped>
.sort-move {
  transition: transform 0.3s;
}
.sort-item:hover {
  background-color: pink;
}
.sort-item {
  background-color: #fff;
  margin-top: 1.375rem;
  cursor: move;
  font-size: 1.25rem;
  span {
    display: inline-block;
    width: 1.875rem;
    height: 1.5rem;
    background-color: #ff5e4e;
    color: #fff;
    vertical-align: middle;
    border-radius: 0px 0.75rem 0.75rem 0px;
    font-size: 1.25rem;
    line-height: 1.5rem;
    padding-left: 0.375rem;
  }
}

.h60 {
  height: 3.75rem;
  line-height: 3.75rem;
  padding-left: 1.25rem;
  box-sizing: border-box;
  background-color: #f7f7f7;
  display: flex;
  position: relative;
  margin-bottom: 1rem;
  .exnum {
    width: 45rem;
    font-size: 1rem;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .labels {
    display: flex;
    justify-content: flex-end;
    width: 21.25rem;
    span {
      height: 1.875rem;
      line-height: 1.875rem;
      padding: 0 0.375rem;
      box-sizing: border-box;
      background-color: #ff9b4f;
      border-radius: 0.1875rem;
      margin: 0.9375rem 0.46875rem;
      color: #fff;
      box-sizing: border-box;
    }
  }
}

.time {
  font-size: 1rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  position: relative;
  margin-top: 1.875rem;
  span {
    margin-right: 1.875rem;
  }
  .iconfont {
    font-size: 1.5rem;
    color: #ccc;
  }
  .end {
    position: absolute;
    right: -1.5rem;
    text-align: right;
  }
}
</style>